<template>
  <BasicModal width="700" v-bind="$attrs" cancelText="关闭" okText="提交"
    :title="getTitle"
    :canFullscreen="false"
    :centered="true"
    :destroyOnClose="true"
    :okButtonProps="{ disabled: isUploadingRef }"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" :model="model" />
  </BasicModal>
</template>

<script lang="ts" name="BankRunningModal" setup>
import {ref, computed, unref, reactive} from 'vue';
import {BasicModal, useModalInner} from '/@/components/Modal';
import {BasicForm, useForm} from '/@/components/Form/index';
import {bankRunningSave, bankRunningById} from "/@/views/full/bank/types/bank.api";
import {useMessage} from "/@/hooks/web/useMessage";

import moment from 'dayjs'

const $message = useMessage();

// 声明Emits
const emit = defineEmits(['success', 'register']);

// 表单modal
const model = reactive<any>({})
// 是否正在上传
const isUploadingRef = ref(false);

//表单检查
const rules = reactive({
  bankId: [ { required: true, message: '必须选择银行' }, ],
  sflx: [ { required: true, message: '必须选择收付类型' }, ],
  jzsj: [ { required: true, message: '必须选择记账日期' }, ],
  je: [ { required: true, message: '必须输入金额' }, ],
})

//表单配置
const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
  schemas: [
    { label: "", field: "id", component: "Input", show: false },
    {
      label: "收支账户",
      field: "bankId",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "chee_bank,djm,id@ddlxBank",
        placeholder: " ",
        stringToNumber: true
      },
      required: true
    },
    {
      label: "部门账户",
      field: "bankOid",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "chee_bank,djm,id@ddlxBank",
        placeholder: " ",
        stringToNumber: true
      },
      dynamicDisabled: ({model}) => {
        return true;
      },
      ifShow: ({model}) => {
        return model.id != "";
      }
    },
    {
      label: "收支类型",
      field: "sflx",
      component: "JDictSelectTag",
      componentProps: { dictCode: "sflxType", placeholder: " " },
      required: true
    },
    {
      label: "记账日期",
      field: "jzsj",
      component: "DatePicker",
      defaultValue: moment().format("YYYY-MM-DD"),
      componentProps: { 
        valueFormat: "YYYY-MM-DD",
        style: "width: 110px; padding:4px"
       },
      required: true
    }, //, rules: [{required: true, type: 'string'}],
    {
      label: "金额",
      field: "je",
      component: "InputNumber",
      componentProps: { placeholder: " " },
      rules: [{ required: true, type: "number" }]
    },
    {
      label: "收支部门",
      field: "ddlx",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "ddlxType",
        placeholder: " ",
      },
      dynamicDisabled: ({model}) => {
        return true;
      }
    },
    { label: "对方户名", field: "dfhm", component: "Input", componentProps: { placeholder: " ", autoComplete:"off" } },
    { label: "对方账户", field: "dfzh", component: "Input", componentProps: { placeholder: " ", autoComplete:"off" } },
    { label: "备注", field: "bz", component: "InputTextArea", componentProps: { placeholder: " ", rows: 8 } }
  ],
  labelWidth: 120,
  baseColProps: {span: 20},
  showActionButtonGroup: false,
});

const isUpdate = ref(true);

//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  setModalProps({confirmLoading: false});
  isUpdate.value = !!data?.isUpdate;
  await resetFields()

  let record = data?.record || {}
  if (isUpdate.value) {
    // 流水数据
    record = await bankRunningById({id:data?.record?.id});
    Object.assign(model, record);
  } else {
    model.length = 0;
    Object.assign(model, {});
  }

  // 确认按钮
  let shbj    = !!model && model.shbj ? model.shbj : "";
  let orderId = !!model && model.orderId ? model.orderId : "";

  if (shbj == '1') {
    if (orderId && orderId.indexOf('-9') > 0) {
      isUploadingRef.value = false;
    } else {
      isUploadingRef.value = true;
    }
  } else {
    isUploadingRef.value = false;
  }

  if (!!data?.isView ) {
    isUploadingRef.value = true;
  }

  await setFieldsValue(record)

});

// 标题
const getTitle = computed(() => {
  let text = '新增';

  // 标题
  text = (!unref(isUpdate) ? '新增' : ( isUploadingRef.value ? '查看' : '编辑' ));

  // 是划转数据
  if (!!model.orderId && model.orderId.indexOf("-9") >= 0) {
    text = text + "划转数据";
  }
  return text;
});

//表单提交事件
async function handleSubmit() {
  try {
    setModalProps({confirmLoading: true});
    const values = await validate();
    await bankRunningSave(values).then((res) => {
      if (res.success) {
        $message.createMessage.success(res.message);
        //关闭弹窗
        closeModal();
        emit("success")
      } else {
        $message.createMessage.warning(res.message);
      }
    });
  } catch (e) {
    console.log("handleSubmit - 提交校验出错", e);
  } finally {
    setModalProps({confirmLoading: false});
  }
}

</script>

<style lang="less" scoped>
:deep(.ant-input-number .ant-input-number-input) {
  padding: 0 3px !important;
}
:deep(.ant-input-affix-wrapper) {
  padding: 0px !important;
}
</style>
